<template>
    <div>
        <v-chart class="chart" :option="option" />

        <div class="chart-container">
            <v-chart class="chart" :option="barChartOption" />
        </div>
    </div>
</template>
  
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { getFifthView } from "@/api/keshihuaManage/getView";
import { getSaleApi } from "@/api/goodsTypeManage/goodsType"
use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
]);

export default {
    name: "HelloWorld",
    components: {
        VChart
    },
    provide: {
        [THEME_KEY]: "dark"
    },
    data() {
        return {
            fifthView: [],
            categorySale: [],
        };
    },
    methods: {
        getV() {
            getFifthView().then(resp => {
                this.fifthView = resp;
            })
        },
        getS() {
            getSaleApi().then(resp => {
                this.categorySale = resp;
            })

        }
    },
    created() {
        this.getV();
        this.getS();
    },
    computed: {
        option() {
            return {
                title: {
                    text: "点击量前五占比分布",
                    left: "center"
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                    data: [
                        "Direct",
                        "Email",
                        "Ad Networks",
                        "Video Ads",
                        "Search Engines"
                    ]
                },
                series: [
                    {
                        name: "Traffic Sources",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "60%"],
                        data: this.fifthView.map(item => ({
                            value: item.viewcount,
                            name: item.name,
                        })),
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)"
                            }
                        }
                    }
                ]
            }
        },
        barChartOption() {
            return {
                title: {
                    text: "销量种类",
                    left: "center"
                },
                xAxis: {
                    type: 'category',
                    data: this.categorySale.map(item => item.name)
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.categorySale.map(item => item.sale),
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            }
        },
    },
};
</script>
  
<style scoped>
.chart {
    height: 400px;
}
</style>